<template>
  <div class="item-list">
    <img src="../../../static/images/arrow-left.png" class="arr" alt="返回" @click="router.back()"/>

    <div class="item" v-for="item in zhiJieList" :key="item.id" >
      <!-- 左侧内容区域 -->
      <div class="content">
        <div>
          <span class="label">产品条码 :</span>
          <span class="value">{{ item.tiaoma }}</span>
        </div>
        <div>
          <span class="label">产品名称 :</span>
          <span class="value">{{ item.productName }}</span>
        </div>
        <div>
          <span class="label">产品规格 :</span>
          <span class="value">{{ item.spec }}</span>
        </div>
        <div>
          <span class="label">出库数量 :</span>
          <span class="value">{{ item.number }}</span>
          &nbsp;&nbsp;  <!-- 单位 -->
          <span class="value">{{ item.unit }}</span>
        </div>
      </div>
      
      <button class="outbound-btn" @click="go(item.id)">出库</button>
    </div>
    
    <!-- 空数据提示 -->
    <div class="empty-tip" v-if="zhiJieList.length === 0">
      暂无直接出库数据
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { queryZhiJieDetail } from '@/api/instore'

const router = useRouter();
const route = useRoute(); // 获取路由实例，用于获取参数
const zhiJieList = ref([]);

// 跳转详情页
function go(id) {
  // 这里根据实际需求修改跳转路径
  router.push({
    path: '/', // 假设的详情页路径
    query: { id } // 将id作为参数传递
  });
}

// 查询数据
async function selectZJList() {
  // 从路由参数中获取id
  const { id } = route.query;
  
  // 检查id是否存在
  if (!id) {
    console.error("没有获取到ID参数");
    return;
  }
  
  try {
    // 使用正确的API方法查询数据
    const res = await queryZhiJieDetail(id);
    console.log("接口返回结果：", res); 
    if (res.code === 200 && Array.isArray(res.data)) {
      zhiJieList.value = res.data;
    } else {
      zhiJieList.value = [];
    }
  } catch (error) {
    zhiJieList.value = [];
    console.error("数据查询失败：", error);
  }
}

onMounted(() => {
  selectZJList();
})
</script>

<style scoped>
.item-list {
  padding: 15px;
}

.arr {
  width: 24px;
  height: 24px;
  margin-bottom: 15px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  
}

.content {
  flex: 1;
}

.label {
  color: #666;
  margin-right: 8px;
}

.value {
  color: #333;
}

.empty-tip {
  text-align: center;
  padding: 20px;
  color: #999;
}


.outbound-btn{
  background-color: #d46006;
  color: white;
  padding: 6px 20px;  /* 上下 左右 边距 */
  border-radius: 5px;  /* 边框圆角 */
  border: none;  /* 移除默认边框 */
  cursor: pointer;  /* 鼠标悬停时显示手型指针，提升交互体验 */
}
.outbound-btn:hover {
  background-color: #b35205;  /* 稍深的橙色， hover时变化 */
}
</style>
